<template>
  <div class="index" :style="cssProperties">
    <div :class="['left', props.divider ? 'divider' : '']">
      <a-space align="center">
        <slot name="left" />
      </a-space>
    </div>
    <div class="right">
      <a-space align="center">
        <slot name="right" />
      </a-space>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  // 参数说明
  defineProps<{
    divider?: boolean; // 分割线
    padding?: number;
    paddingTop?: number;
    paddingBottom?: number;
    paddingLeft?: number;
    paddingRight?: number;
    margin?: number;
    marginTop?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginRight?: number;
  }>(),
  {
    divider: false,
    padding: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    margin: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0
  }
);
const cssProperties = computed(() => {
  let cssObj: any = {};
  if (!isMargin()) {
    cssObj.margin = `${props.margin}px`;
  } else {
    cssObj.marginTop = `${props.marginTop}px`;
    cssObj.marginBottom = `${props.marginBottom}px`;
    cssObj.marginLeft = `${props.marginLeft}px`;
    cssObj.marginRight = `${props.marginRight}px`;
  }
  if (!isPadding()) {
    cssObj.padding = `${props.padding}px`;
  } else {
    cssObj.paddingTop = `${props.paddingTop}px`;
    cssObj.paddingBottom = `${props.paddingBottom}px`;
    cssObj.paddingLeft = `${props.paddingLeft}px`;
    cssObj.paddingRight = `${props.paddingRight}px`;
  }
  return cssObj;
});
const isMargin = () => {
  if (
    props.marginLeft +
    props.marginRight +
    props.marginTop +
    props.marginBottom
  ) {
    return true;
  }
  return false;
};
const isPadding = () => {
  if (
    props.paddingLeft +
    props.paddingRight +
    props.paddingTop +
    props.paddingBottom
  ) {
    return true;
  }
  return false;
};
</script>
<style scoped lang="less">
.index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    flex: 1;
  }
  .divider {
    border-right: 1px solid #eee;
    margin-right: 20px;
  }
}
</style>
